<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap -->
    <link href="__STATIC__/admin/assets/css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
    <!--引入图标样式-->
    <link rel="stylesheet" href="__STATIC__/admin/assets/font-awesome/css/font-awesome.min.css">
</head>
<style>
    .g_allot{
        padding-bottom: 50px;
    }
    .g_allot .tile{
        width: 92%;
        margin: 4%;
        padding: 10px;
        background-color: #f5f5f5;
    }
    .g_allot .tile .tile-header{
        margin: 0;
    }
    .g_allot .tile .tile-header label{
        font-size: 20px;
        font-weight: normal;
    }

    .g_allot .tile .tile-widget .g_info{
        margin-top: 20px;
    }
    .g_allot .tile .tile-widget .g_info label{
        height: 35px;
        width: 100px;
        text-align: right;
        font-weight: normal;
    }
    .g_allot .tile .tile-widget .g_info input{
        border: 1px solid #ccc;
        border-radius: 5px;
        height: 35px;
        width: 400px;
        margin-left: 20px;
        padding-left: 10px;
    }
    .g_allot .tile .tile-widget .g_info textarea{
        border: 1px solid #ccc;
        border-radius: 5px;
        height: 85px;
        width: 400px;
        margin-left: 20px;
        padding-left: 10px;
        vertical-align:top;
    }
    .g_allot .tile  .tile-body{
        border-bottom: 1px solid #ccc;
        margin-top: 20px;
        margin-bottom: 20px;
        padding-bottom: 12px;
    }
    .g_allot .tile  .tile-body p{
        margin-top: 20px;
        color: #5d98d9;
    }
    .g_allot .tile  .tile-body .g_info{
        margin-top: 10px;
    }
    .g_allot .tile  .tile-body .g_info label{
        height: 35px;
        width: 100px;
        text-align: right;
        font-weight: normal;
    }
    .g_allot .tile  .tile-body .g_info .btn-group .dropdown-toggle{
        border: 1px solid #ccc;
        border-radius: 5px;
        height: 35px;
        width: 200px;
        margin-left: 20px;
        padding-left: 10px;
        text-align: left;
    }
    .g_allot .tile  .tile-body .g_info .btn-group .dropdown-toggle .caret{
        float: right;
        margin-top: 10px;
    }
    .g_allot .tile  .tile-body .g_info .open>.dropdown-menu {
        display: block;
        width: 200px;
        margin-left: 20px;
        max-height: 160px;
        overflow-y: auto;
    }
    .btn_box {
        width: 100%;
        position: fixed;
        bottom: 0;
        z-index: 999;
        text-align: right;
        background-color: #f8f8f8;
    }
    .btn_box .btn-primary {
        background-color:  #1aae88;
        border: 1px solid #1aae88;
    }
    .select_all{
        height: 35px;
        width: 150px;
        border-radius: 5px;
    }
    .g_info textarea{
        resize:none;
    }
</style>
<body>
    <div class="g_allot">
        <section class="tile">
            <!-- tile body -->
            <div class="tile-body">
                <p>请选择邀约客服</p>
                <div class="g_info">

                    <!--<select>
                        <option>邀约客服组</option>
                    </select>-->
                    <form id="res_form">
                        <input type="hidden" id="id" name="id" value="{$data.id}">
                        <label>邀约客服：</label>
                        <div class="btn-group margin-bottom-20">
                            <select class="select_all invitgroup" name="yykf_group" id="group0">
                                <option value="0">选择邀约组</option>
                                {volist name="sondepar" id="info"}
                                <option  value="{$info.id}" {eq name="$info.id" value="$data.yykf_group"}selected{/eq}>{$info.name}</option>
                                {/volist}
                            </select>
                            <select class="select_all " name="yykf" id="invit10">
                                <option value="0">选择邀约人员</option>
                            </select>
                        </div>
                    </form>
                </div>
            </div>

            <!-- tile header -->
            <div class="tile-header">
                <label>客户信息</label>
            </div>
            <!-- /tile header -->

            <!-- tile widget -->
            <div class="tile-widget">
                <div class="g_info">
                    <label>客户姓名：</label>
                    <input type="text"  disabled value="{$data.name_z}">
                </div>
                <div class="g_info">
                    <label>客户电话：</label>
                    <input type="text" disabled  value="{$data.phone_z}">
                </div>
                <div class="g_info">
                    <label>客户微信：</label>
                    <input type="text" disabled value="{$data.wechat}">
                </div>
                <div class="g_info">
                    <label>推广人员：</label>
                    <input type="text"  disabled value="{$data.jdry_text}">
                </div>
                <div class="g_info">
                    <label>建单时间：</label>
                    <input type="text"  disabled value="{$data.jdtime}">
                </div>
                <div class="g_info">
                    <label>推广备注：</label>
                    <textarea disabled>{$data.qdbz}</textarea>
                </div>
            </div>
            <!-- /tile widget -->
        </section>
    </div>
    <div class="btn_box">
        <button type="button" class="btn btn-primary" onclick="save()">确定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" style="margin: 20px;">取消</button>
    </div>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="__STATIC__/admin/assets/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="__STATIC__/admin/assets/js/vendor/bootstrap/bootstrap.min.js"></script>
<!--引入layer插件-->
<script type="text/javascript" src="__STATIC__/common/layer/layer.js"></script>
<script>
    function save() {
        var invit = $('.invitgroup').val();
        if(invit != 0){
            var formData = new FormData($("#res_form")[0]);
            $.ajax({
                type: "POST",
                url: "{:url('allot')}",
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend:function(){
                    $('.btn-primary').attr("disabled","false"); //禁止点击
                },
                success: function (data) {
                    layer.msg(data.info, {icon: data.status});
                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                        window.parent.location.reload();
                    }, 2000); //延迟演示
                }
            });
        }else{
            layer.msg('请选择邀约人员', {icon: 2});
        }
    }

    var id = $('.invitgroup').val();
    var obj = $('.invitgroup').next().attr('id');
    getuser(id,obj);

    $('.invitgroup').change(function () {
        var id = $(this).val();
        var obj = $(this).next().attr('id');
        getuser(id,obj);
    });
    /*获取对应的邀约组员*/
    function getuser(id,obj,user) {
        $.post("{:url('common/getuserByGroup')}",{depart_id:id},function(result){
            var html = '';
            $('#'+obj).html('');
            if(id == '0'){
                html += "<option value='0'>选择邀约人员</option>";
            }else {
                if(result.length ==0){
                    html += "<option  disabled>暂无邀约人员</option>";
                }else {
                    for (var i in result) {
                        if(user == result[i].id){
                            html += "<option value="+result[i].id+" selected >"+result[i].username+"</option>"
                        }else {
                            html += "<option value="+result[i].id+">"+result[i].username+"</option>"
                        }

                    }
                }

            }
            $('#'+obj).append(html);
        });
    }

    /*点击取消按钮*/
    $('.btn-default').click(function () {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    });

    /*下拉菜单事件*/
    $('.dropdown-toggle').next('.dropdown-menu').find('li a').click(function () {
        $(this).parent().parent().prev('.dropdown-toggle').find('.title').html($(this).html());
        var identification = $(this).prop('id');
        $(this).parent().parent().prev('.dropdown-toggle').find('input').val(identification);
    });
</script>
</html>